<template>
  <bg class="login-all">
    <div :class="['login-content']">
      <div class="login-box">
        <div class="login-txt">
          <h1>
            <span class="unit">
              <img v-if="logo" :src="logo">
              <span v-if="unit" v-html="unit" />
            </span>
            <span v-if="title" class="title" v-text="title" />
          </h1>
          <div class="slogan" v-html="slogan" />
        </div>
        <el-form ref="form" class="login-dlg" :model="loginForm" :disabled="loading" :rules="rules">
          <el-form-item class="dlg-tit">
            <h3>用户登录</h3>
            <h4>USER LOGIN</h4>
          </el-form-item>
          <el-form-item prop="username" class="item">
            <el-input v-model="loginForm.username" name="username" placeholder="请输入账号">
              <i slot="prefix" class="el-icon-user el-input__icon" />
            </el-input>
          </el-form-item>
          <el-form-item prop="password" class="item">
            <el-input
              v-model="loginForm.password"
              type="password"
              name="password"
              autocomplete="new-password"
              placeholder="请输入密码"
            >
              <i slot="prefix" class="el-icon-lock el-input__icon" />
            </el-input>
          </el-form-item>
          <el-form-item class="fgt">
            <el-checkbox v-model="ischeck">记住密码</el-checkbox>
          </el-form-item>
          <el-form-item>
            <el-button :loading="loading" size="medium" type="primary" @click="handleLogin">{{
              loading ? '正在登录...' : '登录'
            }}</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
  </bg>
</template>
<script>
import { Form, FormItem, Input, Button, Checkbox } from 'element-ui'
import bg from '@/components/Bg'
import logo from '../../assets/cse/logo.png'

import defaultSettings from '@/settings'
const { title, unit, slogan } = defaultSettings
export default {
  components: {
    bg,
    elForm: Form,
    elFormItem: FormItem,
    elInput: Input,
    elButton: Button,
    elCheckbox: Checkbox
  },
  data() {
    return {
      unit,
      logo,
      title,
      slogan,
      loading: false,
      ischeck: !!localStorage.getItem('loginForm'),
      redirect: undefined,
      loginForm: {
        username: localStorage.getItem('loginForm')
          ? JSON.parse(localStorage.getItem('loginForm')).username
          : '',
        password: localStorage.getItem('loginForm')
          ? JSON.parse(localStorage.getItem('loginForm')).password
          : ''
      },
      rules: {
        username: [{ required: true, message: '请输入账号', trigger: 'blur' }],
        password: [{ required: true, message: '请输入密码', trigger: 'blur' }]
      }
    }
  },
  watch: {
    $route: {
      handler: function(route) {
        this.redirect = route.query && route.query.redirect
      },
      immediate: true
    }
  },
  mounted() {
    this.keyupEnter()
  },
  methods: {
    keyupEnter() {
      document.onkeydown = e => {
        if (e.keyCode === 13 && e.target.baseURI.match(/login/)) {
          this.handleLogin()
        }
      }
    },
    handleLogin() {
      this.$refs.form.validate().then(r => {
        if (r) {
          this.loading = true
          this.$store
            .dispatch('user/login', this.loginForm)
            .then(() => {
              if (this.ischeck) {
                localStorage.setItem('loginForm', JSON.stringify(this.loginForm))
              } else {
                localStorage.setItem('loginForm', '')
              }
              if (this.redirect) {
                this.$router.push({ path: this.redirect })
              } else {
                this.$router.push({ path: '/' })
              }
              this.loading = false
            })
            .catch(() => {
              this.loading = false
            })
        }
      })
    }
  }
}
</script>
<style scoped>
::v-deep .el-checkbox__input.is-checked + .el-checkbox__label {
  color: #fff;
}
::v-deep .el-checkbox__input.is-checked .el-checkbox__inner {
  background-color: #426ded;
  border-color: #426ded;
}
::v-deep .el-checkbox__input.is-focus .el-checkbox__inner {
  border-color: #426ded;
}
::v-deep .el-checkbox__inner:hover {
  border-color: #426ded;
}
::v-deep .el-checkbox__inner:focus {
  border-color: #426ded;
}
</style>
<style lang="scss" scoped>
.login-all {
  display: flex;
  align-items: center;
  user-select: none;
  height: 100vh;
  .el-form-item__error {
    line-height: 0.5;
    white-space: normal !important;
    margin: 0 !important;
  }
  .login-content {
    background-color: rgba(0, 0, 0, 0.3);
    width: 100vw;

    .login-box {
      width: 1180px;
      // max-width: 100vw;
      margin: 0 auto;
      display: flex;
      color: #fff;

      .login-txt {
        flex-grow: 1000;
        padding-right: 24px;
        box-sizing: border-box;
        display: flex;
        flex-wrap: wrap;
        align-content: flex-start;
        flex-direction: column;

        h1 {
          font-size: 35px;
          display: flex;
          align-items: flex-start;
          margin-top: 80px;
          min-height: 107px;

          .unit {
            display: flex;
            align-items: center;
            line-height: 1.2;
            flex-shrink: 0;
            flex-wrap: wrap;

            span {
              position: relative;
              white-space: nowrap;
              line-height: 1.2;

              img {
                display: block;
                position: absolute;
                width: 100%;
              }
            }

            img {
              height: 47px;
              margin: 0 25px 0 0;
            }
          }

          .title {
            font-size: 36px;
            // font-weight: 400;
            display: flex;
            align-items: flex-start;
            line-height: 1.2;
            white-space: pre;

            &::before {
              content: '';
              display: block;
              height: 1em;
              width: 1px;
              background-color: hsla(0, 0%, 100%, 0.4);
              margin: 4px 24px 0;
              flex-shrink: 0;
            }
          }
        }
      }

      .login-dlg {
        background-color: rgba(0, 0, 0, 0.3);
        flex-shrink: 0;
        padding: 30px 50px;
        max-width: 100vw;
        width: 400px;

        h3 {
          font-size: 24px;
          padding: 0 0 6px 0;
          line-height: 1;
          margin: 0;
        }

        h4 {
          font-size: 12px;
          line-height: 1;
          color: rgba(255, 255, 255, 0.4);
          padding: 0;
          margin: 0 0 20px 0;
        }

        &.el-form {
          .el-form-item {
            margin: 0;

            &.item {
              // height: 6rem;
              min-height: 56px;
            }

            &.fgt {
              color: rgba(253, 253, 254, 0.8);
              .el-form-item__content {
                display: flex;
                line-height: 1;
                .el-checkbox {
                  color: #fff !important;
                }
              }
            }

            .el-input {
              .el-input__inner {
                padding-left: 60px;
              }

              .el-input__prefix {
                padding: 0 10px 0 10px;

                &::after {
                  content: '';
                  position: absolute;
                  display: block;
                  width: 2px;
                  background-color: #c0c4cc;
                  border-radius: 50%;
                  right: 0;
                  top: 10%;
                  height: 80%;
                }
              }
            }

            .el-checkbox {
              &.is-checked {
                .el-checkbox__input {
                  &.is-checked {
                    .el-checkbox__inner {
                      background-color: #426ded;
                      border-color: #426ded;
                    }
                  }
                }
              }
            }

            .el-checkbox__label {
              color: #fff;
            }

            .el-button {
              margin-top: 60px;
              font-size: 18px;
              font-weight: 400;
              height: 50px;
              line-height: 50px;
              padding: 0;
              width: 100%;

              &.el-button--primary {
                background-color: #426ded;
                border-color: #426ded;

                &:hover,
                &:focus {
                  background-color: #688af1;
                  border-color: #688af1;
                }
              }
            }
            .el-form-item__content {
              width: 100%;
            }
          }
        }
      }
    }
  }
}
.slogan {
  font-size: 36px;
  font-weight: 400;
  line-height: 2;
  width: 60%;
  margin: 0 auto;
  display: flex;
  flex-flow: column;
}
</style>
